<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1200, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            padding: 20px;
            background-color: gray;
        }
        #box2 {
            width: 50px;
            height: 50px;
            padding: 10px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">test</div>
    </div>

    <script>
        const box = document.querySelector('#box2')
        box.addEventListener('click', (e) => {
            console.clear()
            console.log(`clientX = ${e.clientX}, clientY = ${e.clientY}`)
            console.log(`screenX = ${e.screenX}, screenY = ${e.screenY}`)
            console.log(`offsetX = ${e.offsetX}, offsetY = ${e.offsetY}`)
            console.log(`pageX = ${e.pageX}, pageY = ${e.pageY}`)
            console.log(`x = ${e.x}, y = ${e.y}`)
            console.log(`layerX = ${e.layerX}, layerY = ${e.layerY}`)
        })

    </script>
</body>
</html>